<template>
  <!-- 代付款组件 -->
  <div>
    <ul>
      <li v-for="(item, index) in filterdai" :key="index">
        <div class="titles">
          <div>{{ item.name }}</div>
          <div class="ck"><div>待付款</div></div>
        </div>
        <div class="contents">
          <div class="leftimg">
            <img :src="item.cShopImgSrc" alt="" />
          </div>
          <div class="righttext">
            <p>{{ item.title }}</p>
            <div class="num">
              <div class="pricenum">{{ item.ctype }}</div>
              <div>
                x<span>{{ item.num }}</span>
              </div>
            </div>
            <p>
              ￥<span>{{ item.price * item.num }}</span>
            </p>
          </div>
        </div>
        <div class="nums">
          <div>
            <!-- {{ item.allnumprice }} -->
          </div>
          <div class="btns">
            <button @click="cancel(index)">取消订单</button>
            <button @click="tobepaid(item,index)">去付款</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Dialog } from "vant";
import pulicslot from "../pulicslot";
export default {
  data() {
    return {
      list: [],
     objarr:[]
    };
  },
  computed:{
      filterdai(){
          return this.list.filter((item)=>item.paystatus=='代付款');
      }
  },
  methods: {
    //取消订单事件
    cancel(index) {
     
      console.log(index);
      Dialog.confirm({
        title: "",
        message: "确认取消订单吗",
      })
        .then(() => {
          for (let i = 0; i < this.list.length; i++) {
            if (index == i) {
              this.list.splice(i, 1);
            }
          }
          localStorage.setItem("shangpindata", JSON.stringify(this.list));
        })
        .catch(() => {
          // on cancel
        });
    },
    //去付款按钮
    tobepaid(item,index) {
     
        console.log(item);
        this.objarr.push(item)
        this.$store.commit("fukuan",this.objarr)
        this.$router.push('/gopaid')
        this.$store.commit("fukuanindexFn",item)
        // this.$store.state.fukuanindex=index;
        console.log(item);
      
        
    },
  },
  mounted() {
    let shuju = JSON.parse(localStorage.getItem("shangpindata"));
    console.log(shuju);
    this.list = shuju;
    //   this.$store.getters.totalPrice
  },
};
</script>

<style lang="less" scoped>
li {
  padding: 10px 40px 30px 40px;
  font-size: 33px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  .titles {
    display: flex;
    justify-content: space-between;
    .ck {
      font-size: 25px;
      color: red;
    }
  }
  .contents {
    display: flex;
    text-align: left;
    img {
      width: 180px;
    }
    .righttext {
      width: 70%;
      margin-left: 20px;
      line-height: 60px;
      font-size: 27px;
      .num {
        display: flex;
        justify-content: space-between;
        .pricenum {
          background-color: #f2f2f2;
        }
        :nth-child(1) {
          border-radius: 30px;
          width: 300px;
          height: 40px;
          line-height: 40px;
          font-size: 25px;
          text-align: center;
          margin-top: 10px;
        }
        :nth-child(2) {
          color: #d9d9d9;
        }
      }
      :nth-child(3) {
        color: red;
      }
    }
  }
  .nums {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 25px;
    .btns {
      width: 50%;
      button {
        width: 140px;
        border: 4px solid #d0d0d0;
        border-radius: 30px;
        margin-left: 15px;
        background-color: #fff;
      }
      :nth-child(1) {
        color: #d0d0d0;
        border-color: #d0d0d0;
      }
      :nth-child(2) {
        color: red;
        border-color: red;
      }
    }
  }
}
</style>